<template>
	<view class="page l_pages" v-bind:class="type != 1 ? 'bg' : ''" :style="skin">
		<jnavbar title="分销中心" :PageId="13"></jnavbar>
		<view class="page_container tab_page_container" scroll-y>
			<block v-if="type == 1">
				<view class="banner">
					<view class="info uni-flex-row">
						<image :src="agentdetail.picurl" mode=""></image>
						<view class="uni-flex-column">
							<text>{{ agentdetail.nickname }}</text>
							<text>推荐人:{{ agentdetail.p_nickname }}</text>
						</view>
						<view v-if="agentExplain.is_agent_level" class="level" @click="Jumpurling('agentlevel')">
							<text>升级条件</text>
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
					<view class="uni-flex-row uni-flex-title">
						<view class="uni-flex-column">
							<text>可提现佣金</text>
							<text>{{ agentdetail.agent }}</text>
						</view>
						<text @click="Jumpurling('withdrawdetail')">提现</text>
					</view>
				</view>
				<view class="uni-flex-row tabs">
					<view class="tab_item uni-flex-column">
						<text>已提现金额</text>
						<text>{{ agentdetail.agent_withdraw }}</text>
					</view>
					<u-line color="#333" direction="col" length="50" />
					<view class="tab_item uni-flex-column">
						<text>未结算佣金</text>
						<text>{{ agentdetail.sum_figure }}</text>
					</view>
				</view>
				<view class="u-flex u-flex-wrap list">
					<view class="uni-flex-column item">
						<text class="el-sc-shezhifenxiaoyongjin"></text>
						<view class="uni-flex-column-center">
							<text>分销佣金</text>
							<text>{{ agentdetail.agent_total }}元</text>
						</view>
					</view>
					<view class="uni-flex-column item" @click="Jumpurling('order')">
						<text class="el-sc-fenxiaodingdan"></text>
						<view class="uni-flex-column-center">
							<text>分销订单</text>
							<text>{{ agentdetail.count_order }}笔</text>
						</view>
					</view>
					<view class="uni-flex-column item" @click="Jumpurling('withdrawlist')">
						<text class="el-sc-mingxi"></text>
						<view class="uni-flex-column-center">
							<text>提现明细</text>
							<text>{{ agentdetail.agent_withdraw }}元</text>
						</view>
					</view>
					<view class="uni-flex-column item" @click="Jumpurling('list')">
						<text class="el-sc-tuandui"></text>
						<view class="uni-flex-column-center">
							<text>我的团队</text>
							<text>{{ agentdetail.team }}人</text>
						</view>
					</view>
					<view class="uni-flex-column item" @click="buildqrcode">
						<text class="el-sc-tuiguangerweima"></text>

						<view class="uni-flex-column-center"><text>推广二维码</text></view>
					</view>
					<view v-if="addons.indexOf(30) > -1" class="uni-flex-column item" @click="Jumpurling('/agentpage/commission/activitylist')">
						<text class="el-sc-tuandui"></text>
						<view class="uni-flex-column-center">
							<text>达标奖励</text>
							<!-- <text>{{ agentdetail.team }}人</text> -->
						</view>
					</view>
					<view v-if="addons.indexOf(31) > -1" class="uni-flex-column item" @click="Jumpurling('/agentpage/commission/assessment')">
						<text class="el-sc-tuandui"></text>
						<view class="uni-flex-column-center">
							<text>分销考核</text>
							<!-- <text>{{ agentdetail.team }}人</text> -->
						</view>
					</view>
				</view>
			</block>
			<block v-else-if="type == 2">
				<view class="bg_img">
					<vimage v-if="agentExplain.titleImg" class="" mode="widthFix" :src="agentExplain.titleImg"></vimage>
					<vimage v-else imgtype="1" class="" mode="widthFix" src="static/images/agent.png"></vimage>
				</view>
				<view class="content">
					<text class="name">分销特权</text>
					<view class="content_text">
						<text>1.销售拿佣金</text>
						<text>商品销售统一由平台直接收款并返佣。</text>
					</view>
					<view class="content_text">
						<text>2.成为分销商后</text>
						<text>卖出产品，您可以立即获得佣金。</text>
					</view>
				</view>
				<u-button :custom-style="customStyle" type="primary" @click="toapply">立即申请</u-button>
			</block>
			<block v-else-if="type == 3">
				<view class="u-flex userinfo">
					<view class=" uni-flex-column-center">
						<image :src="agent.picurl"></image>
						<text>{{ agent.nickname }}</text>
					</view>

					<text>邀请你成为推广员</text>
				</view>
				<view class="bg_img">
					<vimage v-if="agentExplain.titleImg" class="" :src="agentExplain.titleImg"></vimage>
					<vimage imgtype="1" class="" mode="widthFix" src="static/images/agent.png"></vimage>
				</view>
				<view class="content">
					<text class="name">分销特权</text>
					<view class="content_text">
						<text>1.销售拿佣金</text>
						<text>商品销售统一由平台直接收款并返佣。</text>
					</view>
					<view class="content_text">
						<text>2.成为分销商后</text>
						<text>卖出产品，您可以立即获得佣金。</text>
					</view>
				</view>
				<view class="u-flex btns-agnet">
					<u-button class="cancal_btn" @click="" size="medium" @click="tohome()">先逛逛</u-button>
					<u-button size="medium" type="primary" @click="applyagent">同意</u-button>
				</view>
			</block>
			<block v-else-if="type == 4">
				<view class="applying">
					<view class="image"><vimage imgtype="1" src="static/images/applying.png"></vimage></view>

					<text>分销商审核中</text>
					<text>请耐心等待</text>
				</view>
			</block>
			<block v-else-if="type == 5">
				<view class="applying">
					<view class="image"><vimage imgtype="1" src="static/images/apply_er.png"></vimage></view>
					<text>很遗憾，您未能通过审核</text>

					<u-button :custom-style="customStyle" @click="toapply">重新申请</u-button>
				</view>
			</block>
			<u-gap height="60"></u-gap>
		</view>

		<uni-login ref="Login" @callback="logincallback"></uni-login>
		<u-popup v-model="show" mode="center">
			<view class="qrcodediv" v-if="!agentExplain.code_type">
				<view class="qrcode_top u-flex u-row-between">
					<text>二维码</text>
					<text @click="show = false" class="el-sc-cuo11"></text>
				</view>
				<image :src="mpWxQr" mode=""></image>
				<!-- <image :src="qrcode" mode=""></image> -->
				<text>扫描二维码，加入分销</text>
				<u-button type="primary" :custom-style="customStyle1" class="qrcode_btn" @click="saveimg(mpWxQr)">保存图片</u-button>
			</view>
			<view class="qrcodebox">
				<block v-if="poster.finalPath">
					<image :src="poster.finalPath" mode="widthFix" class="posterImage"></image>
					<view class="savecanvas" @click="toSaveImage"><text>保存图片</text></view>
				</block>
			</view>
		</u-popup>
		<u-popup v-model="show_agentExplain" mode="center">
			<view v-if="applytype == 2 || applytype == 3" class="rule_div uni-flex-column-center">
				<view class="u-main-color u-font-lg">成为分销商条件</view>
				<text class="u-tips-color">{{ rule }}</text>
				<view style="width: 100%;" class="btns-agnet uni-flex-row uni-flex-title">
					<u-button class="cancal_btn" @click="" size="mini" @click="show_agentExplain = false">算了</u-button>
					<u-button @click="" type="primary" size="mini">去消费</u-button>
				</view>
			</view>
			<view v-if="applytype == 1">
				<view class="u-main-color u-font-lg">成为分销商条件</view>
				<view class="list"><view v-for="(item, i) in list" class="item"></view></view>
				<view style="width: 100%;" class="btns-agnet uni-flex-row uni-flex-title">
					<u-button class="cancal_btn" @click="" size="mini" @click="show_agentExplain = false">算了</u-button>
					<u-button @click="" type="primary" size="mini">去消费</u-button>
				</view>
			</view>
		</u-popup>
		<view class="sharepup">
			<view class="hideCanvasView">
				<canvas class="hideCanvas" canvas-id="mini_poster" :style="{width: (poster.width || 1) + 'px', height: (poster.height || 1) + 'px'}"></canvas>
			</view>
		<!-- 	<u-popup v-model="showshareimg" :closeable="true" mode="center">
				<block v-if="poster.finalPath">
					<image :src="poster.finalPath" mode="widthFix" class="posterImage"></image>
					<view class="savecanvas" @click="toSaveImage"><text>保存到相册，分享给好友</text></view>
				</block>
			</u-popup>	 -->	
		</view>
		<tab-bar ref="tabbar" :PageId="13"></tab-bar>
	</view>
</template>

<script>
import base from '@/common/baseUrl.js';
import {mapState, mapMutations} from 'vuex';
import util from '@/common/util.js';
import {getSharePoster} from '@/common/QS-SharePoster/QS-SharePoster.js';
import _app from '@/common/QS-SharePoster/app.js';
export default {
	onShareAppMessage() {
		return this.wxShare();
	},
	data() {
		return {
			agentdetail: {},
			type: 0,
			show: false,
			show_agentExplain: false,
			mpWxQr: '',
			agent: {},
			rule: '',
			applytype: 0,
			customStyle: {
				background: '#ff4f13',
				'box-shadow': '-2px 5px 9px 0px rgba(255, 79, 19, 0.5)',
				'border-radius': '49rpx',
				height: '97rpx',
				margin: '40rpx auto',
				width: '673rpx'
			},
			customStyle1: {
				width: '300rpx',
				height: '82rpx',
				// background: 'linear-gradient(90deg, #fe8e0a, #ff5011)',
				// 'box-shadow': '-2px 5px 9px 0px rgba(254, 140, 10, 0.5)',
				'border-radius': '41rpx',
				'font-size': '34rpx',
				color: '#ffffff'
			},
			agentExplain: {},
			canvasW: 0,
			canvasH: 0,
			canvasId: 'mini_poster',
			poster: {},
		};
	},
	async onLoad(e) {
		await this.$getWx;
		this.getconfiguration();
		this.agent_id = e.id;
		// #ifdef MP-WEIXIN
		if (e && e.scene) {
			const scene = decodeURIComponent(e.scene);
			var id = util.getQueryVariable('id', scene);
			e.id = id;
		}
		this.agent_id = e.id;
		// #endif
		uni.setStorageSync('pid', e.id);
		var _this = this;
		this.$nextTick(a => {
			_this.$refs.tabbar.gettabs();
		});
	},
	onShow() {
		if (this.agent_id) {
			let _this = this;
			this.type = 3;
			this.judgeLogin(
				() => {
					_this.$store.commit('setlogin', false);
				},
				() => {
					_this.getagentdetail();

					// _this.usersetPid();
				}
			);
		} else {
			this.getagentdetail();
		}
	},
	onPullDownRefresh() {
		this.getagentdetail();
	},
	computed: {
		...mapState({
			skin: state => state.skin,
			addons: state => state.addons
		})
	},
	methods: {
		tolevel() {
			this.Jumpurl({type: 1, link: '../index/index', login_type: 1});
		},
		tohome() {
			this.Jumpurl({type: 1, link: '../index/index', login_type: 1});
		},
		Jumpurling(link) {
			this.Jumpurl({
				type: 1,
				link: link,
				login_type: 2
			});
		},

		applyagent() {
			let type = this.agentExplain.become.type;
			this.applytype = type;
			let condition = this.agentExplain.become.condition;
			switch (type) {
				case 0:
					break;
				case 1:
					this.buyCommodity = this.agentExplain.become.condition.buyCommodity;
					this.getlist();

					break;
				case 2:
					this.rule = '消费满' + condition.explainTotal.explain + '元，即可成为分销商';
					this.show_agentExplain = true;
					break;
				case 3:
					this.rule = '消费满' + condition.payOrder.orderCount + '次，即可成为分销商';
					this.show_agentExplain = true;
					break;
				case 4:
					this.Jumpurl({type: 1, link: 'apply', login_type: 2});
					break;
			}
		},
		getlist() {
			let list = this.buyCommodity.commodity;
			this.$http(
				'/goods/getManyGoods',
				{
					cids: JSON.stringify(list)
				},
				'POST'
			).then(res => {
				if (res.statusCode == 200) {
					this.list = res.data.msg;
					this.show_agentExplain = true;
				} else {
				}
			});
		},
		getconfiguration() {
			this.$http('/configuration/agentExplain', {}, 'GET').then(res => {
				this.agentExplain = res.data.msg;
			});
		},

		logincallback(e) {
			if (e.islogin) {
				this.getagentdetail();
				this.getagent();
				this.getconfiguration();
				// this.usersetPid();
			}
		},
		getagent() {
			this.$http('/user/agent/' + this.agent_id, {}, 'GET').then(res => {
				this.type = 3;
				this.agent = res.data.msg;
			});
		},
		toapply() {
			this.Jumpurl({
				type: 1,
				link: 'apply',
				login_type: 2
			});
		},
		getagentdetail() {
			this.$http('/agent', {}, 'GET').then(res => {
				uni.stopPullDownRefresh();
				if (!res.data.msg) {
					if (this.agent_id) {
						_this.getagent();
					} else {
						this.type = 2;
					}
				} else {
					if (res.data.msg.is_agent == 0) {
						this.type = 2;
					} else {
						if (res.data.msg.type == 1) {
							this.type = 4;
						} else if (res.data.msg.type == 2) {
							this.type = 5;
						} else {
							this.type = 1;
							this.agentdetail = res.data.msg;
							// uni.setStorageSync('agentdetail', this.agentdetail);
						}
					}
				}
			});
		},
		buildqrcode() {
			let mall_id = uni.getStorageSync('mall_id');
			// #ifdef H5
			var params = {
				path: '/h5/#/pages/index/index',
				data: {
					id: this.agentdetail.id,
					mall_id: mall_id,
					p: this.agentdetail.id
				}
			};

			// #endif
			// #ifdef MP-WEIXIN
			var params = {
				page: 'pages/index/index',
				scene: 'p=' + this.agentdetail.id + '&id=' + this.agentdetail.id + '&mall_id=' + mall_id
			};
			// #endif
			this.$http('/qrcode', params, 'GET').then(res => {
				const json = res.data;
				this.mpWxQr = util.getimgurl(json.msg, 1);
				console.log(this.mpWxQr)
				if(!this.agentExplain.code_type){
					this.show = true;
				}else{
					this.shareFc()
				}
				
			});
		},
		async shareFc() {
			// this.$refs.canvaspopup.open();
			this.showshareimg = true;
			let that = this;
			const ctx = uni.createCanvasContext(this.canvasId, this);
			// try {
				
			let backgroundImage = util.getimgurl(this.agentExplain.code_bg);
			let code_position=this.agentExplain.code_position
			const d = await getSharePoster({
				_this: this, //若在组件中使用 必传
				// type: 'goodsPoster',
				backgroundImage: backgroundImage, //接口返回的背景图
				formData: {
					//访问接口获取背景图携带自定义数据
				},
				draw: false,
				Context: ctx,
				posterCanvasId: this.canvasId, //canvasId
				delayTimeScale: 20, //延时系数
				drawDelayTime: 500, //draw延时时间
				drawArray: ({bgObj, type, bgScale}) => {
					
					const scale=bgObj.width/375;
					const dWidth=code_position.width*scale;
					const dHeight=code_position.height*scale;
					const right=code_position.right*scale
					const bottom=code_position.bottom*scale
					const dx= bgObj.width - dWidth - right
					const dy= bgObj.height - dHeight - bottom
					console.log(bgObj)
					//可直接return数组，也可以return一个promise对象, 但最终resolve一个数组, 这样就可以方便实现后台可控绘制海报
					return [			
						{
							type: 'image', //二维码
							url: that.mpWxQr,
							alpha: 1,
							drawDelayTime: 800, //draw延时时间
							dx: dx,
							dy: dy,
							infoCallBack(imageInfo) {
								return {
									dWidth: dWidth,
									dHeight: dHeight							
								};
							}
						},
					
					];
				},
				setCanvasWH: ({bgObj, type, bgScale}) => {
					// 为动态设置画布宽高的方法，
					this.poster = bgObj;
				}
			});
			ctx.draw(false, () => {
				uni.showToast({
					title: '绘制完成',
					icon: 'none'
				});
				uni.canvasToTempFilePath(
					{
						canvasId: this.canvasId,
						fileType: 'jpg',
						quality: 0.8,
						success: res => {
							this.$set(this.poster, 'finalPath', res.tempFilePath);
							this.show = true;
						}
					},
					this
				);
			});
		},
		saveimg(path) {
			let url = util.getimgurl(path);
			// #ifdef MP-WEIXIN
			uni.downloadFile({
				url: url,
				success: res => {
					util.toSaveImage(res.tempFilePath);
				},
				fail() {
					uni.showToast({
						icon: 'none',
						title: '小程序码下载失败'
					});
				}
			});
			// #endif
			// #ifndef MP-WEIXIN
			util.toSaveImage(url);
			// #endif
			// util.toSaveImage(path);
		},
		//保存图片
		toSaveImage() {
			util.toSaveImage(this.poster.finalPath);
		}
	}
};
</script>

<style lang="scss">
.page {
	// min-height: 100vh;
	&.bg {
		background: #fff;
	}
}

.banner {
	width: 750rpx;
	background-color: var(--main-color);
	padding: 16rpx 32rpx;
	color: #fff;
	.info {
		// padding: 32rpx;
		color: #fff;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #fff;
		margin-bottom: 20rpx;
		.level {
			position: absolute;
			right: 32rpx;
		}
	}
	image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		background-color: #000;
		margin-right: 24rpx;
	}
}
.tabs {
	width: 702rpx;
	background-color: #fff;
	margin: 20rpx auto;
	border-radius: 12rpx;
	.tab_item {
		flex: 1;
		align-items: center;
		padding: 20rpx 0;
	}
}
.list {
	width: 702rpx;
	background-color: #fff;
	margin: 0 auto;
	border-radius: 12rpx;
	.item {
		width: 234rpx;
		align-items: center;
		justify-content: flex-start;
		padding: 20rpx 0;
		align-self: flex-start;
		> text {
			width: 100rpx;
			height: 100rpx;
			font-size: 80rpx;
			text-align: center;
			color: var(--main-color);
			// background: #0077aa;
		}
	}
}
.userinfo {
	display: flex;
	align-items: center;

	color: #333;
	padding: 12rpx 32rpx;
	image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}
	> text {
		margin-left: 24rpx;
		font-size: 48rpx;
		font-weight: bold;
	}
}
.bg_img {
	width: 680rpx;
	margin: 35rpx;
	position: relative;
	z-index: 1;
}
.content {
	border-top: 1px solid #cdcdcd;
	margin: 0 35rpx;
	.name {
		font-size: 40rpx;
		font-weight: bold;
		color: #333333;
		display: block;
		padding: 60rpx 0 40rpx 0;
	}
	.content_text {
		font-size: 28rpx;
		font-weight: bold;
		color: #999999;
		// line-height: 40rpx;
		text {
			display: block;
		}

		text:first-child {
			color: #333333;
			margin-bottom: 20rpx;
			margin-top: 20rpx;
		}
	}
}
.app_btns {
	height: 97rpx;
	background: #ff4f13;
	box-shadow: -2px 5px 9px 0px rgba(255, 79, 19, 0.5);
	border-radius: 49rpx;
	font-size: 34rpx;
}
.btns-agnet {
	margin: 40rpx 0;
	width: 100%;
	justify-content: space-between;
	padding: 0 48rpx;
	.cancal_btn {
		border: 1px solid #c0c4cc;
	}
}
.rule_div {
	width: 560rpx;
	padding: 20rpx;
}
.applying {
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	.image {
		width: 368rpx;
		height: 368rpx;
		margin: 192rpx auto 92rpx auto;
	}
	text:nth-child(2) {
		font-size: 36rpx;
		font-weight: 500;
		color: #ff6133;
	}
	text:last-child {
		margin-top: 20rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #999999;
	}
	.apply_btn {
		margin-top: 74rpx;
		width: 701rpx;
		height: 80rpx;
		background: linear-gradient(90deg, #fe8e0a, #ff5011);
		border-radius: 40rpx;
		color: #ffffff;
		font-size: 28rpx;
	}
}
.qrcodediv {
	width: 551rpx;
	height: 627rpx;
	background: #ffffff;

	background: #fff;
	padding-top: 20rpx;
	display: flex;
	flex-direction: column;
	align-items: center;

	.qrcode_top {
		width: 100%;
		padding: 0 20rpx;
		font-size: 32rpx;

		.el-sc-cuo11 {
			font-size: 36rpx;
		}
	}

	image {
		margin-top: 40rpx;
		width: 280rpx;
		height: 280rpx;
	}

	> text {
		text-align: center;
		margin-top: 20rpx;
		font-size: 34rpx;
		color: #999999;
	}

	.qrcode_btn {
		width: 300rpx;
		height: 82rpx;
		border-radius: 41rpx;
		font-size: 34rpx;
		color: #ffffff;
		margin-top: 54rpx;
	}
}
.qrcodebox{
	width: 600rpx;
	image{
		width: 600rpx;
	}
}
.hideCanvasView {
	position: relative;
}

.hideCanvas {
	position: fixed;
	top: -99999upx;
	left: -99999upx;
	z-index: -99999;
}
.savecanvas {
	width: 600upx;
	height: 101upx;
	line-height: 101upx;
	text-align: center;
	margin-top: 60upx;
	background: rgba(255, 255, 255, 1);
}
</style>
